/*btn系列*/



.btn{

  position: relative;

  display: block;

  width: 200px;

  height: 50px;

  float:right;

  text-transform: uppercase;

  overflow: hidden;

  border: 1px solid currentColor;

  font-size:18px;

  text-align:center;

  border-radius:25px;

}

.btn p{width: 200px; height: 50px;line-height:50px;font-size:18px;position:absolute;top:0;left:0;z-index:20;color:#ffffff;text-align:center;transition: all 1s ease-in-out, color 1s ease-in-out;}

/*btn每个*/

.btn p:hover{color:#401c1c;}







.btn-3 {

  color: #ffffff;

}

.btn-3:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent transparent #ffffff;

  position: absolute;

  bottom: 0;

  left: 0;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent #ffffff transparent transparent;

  position: absolute;

  top: 0;

  right: 0;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3 span:before {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: transparent transparent #ffffff transparent;

  position: absolute;

  right: 0;

  bottom: 0;

}

.btn-3 span:after {

  content: '';

  width: 0;

  height: 0;

  -webkit-transform: rotate(360deg);

  border-style: solid;

  border-width: 0 0 0 0;

  border-color: #ffffff transparent transparent transparent;

  position: absolute;

  top: 0;

  left: 0;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3:hover {

  color: #ffffff;

}

.btn-3:hover:before {

  border-width: 200px 0 0 200px;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3:hover:after {

  border-width: 0 200px 200px 0;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3:hover span:before {

  border-width: 0 0 200px 200px;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3:hover span:after {

  border-width: 200px 200px 0 0;

  box-sizing: border-box;

  -webkit-transition: 1s;

  transition: 1s;

}

.btn-3:active {

  background: #ffffff;

}